import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_smart_heating/ui/ui.dart';

class ArticleItemView extends StatelessWidget {
  const ArticleItemView({super.key, this.item, this.index});
  final dynamic item;
  final dynamic index;

  @override
  Widget build(BuildContext context) {
    return item['list_style'] == 'large'
        ? ArticleItemLargeView(item: item)
        : ArticleItemSmallView(item: item);
  }
}

class ArticleItemSmallView extends StatelessWidget {
  const ArticleItemSmallView({
    super.key,
    required this.item,
  });
  final dynamic item;
  bool get isBlock => item['id'] == null;
  @override
  Widget build(BuildContext context) {
    return UiOpen(
      url: item['url'] ?? '',
      child: UiPanel(
        height: 100,
        child: Row(
          children: [
            AspectRatio(
              aspectRatio: 12 / 9,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(UiTheme.boxRadiusX),
                    child: Container(
                      color: Colors.grey.withOpacity(0.1),
                      child: isBlock
                          ? null
                          : UiImage(
                              imageUrl: item['image'] ?? '',
                              fit: BoxFit.cover,
                            ),
                    )),
              ),
            ),
            const SizedBox(width: UiTheme.spacing),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  isBlock
                      ? const UiBlock(height: 20, width: 250)
                      : Text(
                          item['title'] ?? '',
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                  const SizedBox(height: 10),
                  isBlock
                      ? const UiBlock(height: 15, width: 120)
                      : Row(
                          children: [
                            const Icon(UiIcons.time_circle, size: 14),
                            const SizedBox(width: 5),
                            Text(item['create_time'] ?? ''),
                            Expanded(child: Container()),
                            const Icon(UiIcons.eye, size: 14),
                            const SizedBox(width: 5),
                            Text('${item['view_count'] ?? 0}'),
                          ],
                        ),
                ],
              ),
            ),
            const SizedBox(width: UiTheme.spacingX),
          ],
        ),
      ),
    );
  }
}

class ArticleItemLargeView extends StatelessWidget {
  const ArticleItemLargeView({
    super.key,
    required this.item,
  });

  final dynamic item;
  bool get isBlock => item['id'] == null;
  @override
  Widget build(BuildContext context) {
    return UiOpen(
      url: item['url'] ?? '',
      child: UiPanel(
        children: [
          AspectRatio(
            aspectRatio: 24 / 9,
            child: ClipRRect(
              borderRadius: const BorderRadius.vertical(
                top: Radius.circular(UiTheme.boxRadius),
              ),
              child: isBlock
                  ? Container(
                      color: Colors.grey.withOpacity(0.2),
                    )
                  : CachedNetworkImage(
                      imageUrl: item['image'] ?? '',
                      fit: BoxFit.cover,
                    ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                isBlock
                    ? const UiBlock(height: 20, width: 250)
                    : Text(
                        item['title'] ?? '',
                        overflow: TextOverflow.ellipsis,
                        style: const TextStyle(fontSize: 16),
                      ),
                const SizedBox(height: 5),
                isBlock
                    ? const UiBlock(height: 15, width: 120)
                    : Opacity(
                        opacity: 0.6,
                        child: Row(
                          children: [
                            const Icon(UiIcons.time_circle, size: 14),
                            const SizedBox(width: 5),
                            Text(item['create_time'] ?? ''),
                            Expanded(child: Container()),
                            const Icon(UiIcons.eye, size: 14),
                            const SizedBox(width: 5),
                            Text('${item['view_count'] ?? 0}'),
                          ],
                        ),
                      ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
